@charset "utf-8";
/*侧滑栏动画实现*/

body {
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  overflow-x:hidden; 
}

body.active {
	width:100%;
  transform: translate3d(22rem, 0, 0);
  -webkit-transform: translate3d(22rem, 0, 0);
  -moz-transform: translate3d(22rem, 0, 0);
  -ms-transform: translate3d(22rem, 0, 0);
  -o-transform: translate3d(22rem, 0, 0);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}


.slide-bar {
  position: absolute;
  background-color: #fff;
  width: 22rem;
  height:100%;
  border-right:.5rem solid #35bdde;  
  left: 0;
  top:0;
  z-index: 2;
  transform: translate3d(-22rem, 0, 0);
  -webkit-transform: translate3d(-22rem, 0, 0);
  -moz-transform: translate3d(-22rem, 0, 0);
  -ms-transform: translate3d(-22rem, 0, 0);
  -o-transform: translate3d(-22rem, 0, 0);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.list-group-item {
    .icon{
        display: inline-block;
       width: 2rem;
       height: 2rem;
       background: url(../img/menu-icon.png) no-repeat;
       background-size: 100%;
       margin-right: 1rem;    
       vertical-align: middle;
    }
    .notice{
       background-position:0 0; 
    }
    .config{
        background-position:0 -2rem;
    }
    .help{
        background-position:0 -4rem;
    }
    .about{
        background-position:0 -6rem;
    }
     text-align:left;
    &:first-child,&:last-child{
      border-radius:0;
    }
    .icon-left {
      margin-right:2rem;
      img {
      height: 1.5rem;
    }
    }
   
    .back {
        width: 2rem;
        height: 2rem;
        display: inline-block;
      background: url(../img/back-icon.png)left center no-repeat;
      background-size: contain;
    }
  	a{
  		color:#35bdde;
  		font-size:1.6rem;
  		&:hover{
  			text-decoration: none;
  		}

  	}
}


